<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,  user-scalable=no">
    <title>Lysholm</title>
    <style>
        #table_total td, #table_total_edit td {
            width: 50%;
            text-align: left;
        }

        #table-data dl, #table-data dt, #table-data dd {
            width: 100% !important;
            text-align: left;
        }

        #table-data dd {
            margin-left: 3vw;
        }

        #table-data dd {
            margin-top: 1vw;
        }

        #table-data dt {
            /*margin-top: 2vw;*/
        }

        #lysholm-questions ul {
            width: 100% !important;
            padding-left: 25px;
            margin: 0;
        }

        #lysholm-questions ul li {
            list-style-type: none !important;
            display: inline-block !important;
            text-align: left !important;
            min-width: 16vw;
            /*min-height: 3vw;*/
            margin-left: 1vw;
        }

        #lysholm-questions ul li:nth-child(n+2) {
            margin-left: 1vw;
        }

        #table_total_edit input {
            border: 0;
        }

        #gauge_form .col-sm-3, #gauge_form .col-sm-9{
            padding-left: 0;
        }

        #table-data dl, #table-data dt, #table-data dd {
            width: 100% !important;
            text-align: left;
        }

        #gauge_form .dashed-border {
            border-bottom: 1px dashed #d0d0d0;
        }
        
        #table_total input {
            border: none;
        }
        
        #gauge_form .result-score {
        	color: #676a6c;
        	background-color: #fff;
        	text-align: center;
        }
    </style>
</head>
<body>
<form id="gauge_form">
    <div id="knee-lysholm">
        <!--<div class="view-page hide">-->
            <!--<table border="0" cellspacing="0" cellpadding="0">-->
                <!--<tr>-->
                    <!--<td align="left" width="80px"><label style="font-size: 18px">陪同者</label></td>-->
                    <!--<td align="left"><label id="span_companion" style="font-weight:normal;font-size: 18px"></label></td>-->
                <!--</tr>-->
            <!--</table>-->
        <!--</div>-->

        <div class="" style="border-bottom: 1px solid #d0d0d0;">
            <label style="font-size: 16px;font-weight: bold;">评定内容</label>
        </div>

        <div class="hide" style="margin-top: 20px;">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="left" style="width: 8vw;vertical-align: middle;"><label style="font-size: 13px">陪同者</label></td>
                    <td align="left" style="vertical-align: middle;"><input id="text_companion" name="text_companion" type="text" class="question-item form-control" style="width: 12vw;"/>
                    </td>
                </tr>
            </table>
        </div>

        <div class="" style="margin-top: 20px;">
            <div id="table-data" class="">
            </div>
        </div>

        <div id="div_edit" class="" style="margin-top: 20px;border-bottom: 1px solid #d0d0d0;">
            <label style="font-size: 16px;font-weight: bold;">评定结果</label>
        </div>
        
        <div style="margin-top: 20px;">
            <table id="table_total" class="table table-bordered" style="margin-top: 20px;border:1px solid #e7e7e7;" border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td style="text-align: center;">得分</td>
                    <td style="text-align: center;"><span class="result-score"></span></td>
                </tr>
            </table>
        </div>

        <div class="edit-page hide" style="margin-top: 20px;">
            <div class="col-sm-3"></div>
            <div class="col-sm-3" style="text-align: center;">
                <button style="width: 102px;" class="btn btn-white" type="reset" onclick="myReset()">重置</button>
            </div>
            <div class="col-sm-3" style="text-align: center;">
                <button style="width: 102px;" class="btn btn-primary" onclick="submitGaugeResult()" type="button">提交</button>
            </div>
            <div class="col-sm-3"></div>
        </div>

    </div>
</form>
</body>
<script>

    var editPage = $(".edit-page");
    var viewPage = $(".view-page");

    var totalRatio = 0;
    var totalScore = 0;

    // 选项数据json
    var pageData = {"data":[{"groupId":"","groupName":"","item":[{"itemId":"","desc":"1.跛行","option":[{"id":"1","desc":"无","score":5},{"id":"2","desc":"轻及/或周期性","score":3},{"id":"3","desc":"重及/或周期性","score":0}]},{"itemId":"","desc":"2.支撑","option":[{"id":"1","desc":"不需要","score":5},{"id":"2","desc":"手杖或拐","score":2},{"id":"3","desc":"不能负重","score":0}]},{"itemId":"","desc":"3.交锁","option":[{"id":"1","desc":"无交锁或别卡感","score":15},{"id":"2","desc":"别卡感但无交锁","score":10},{"id":"3","desc":"偶有交锁","score":6},{"id":"4","desc":"经常交锁","score":2},{"id":"5","desc":"体检时交锁","score":0}]},{"itemId":"","desc":"4.不稳定","option":[{"id":"1","desc":"无打软腿","score":25},{"id":"2","desc":"运动或重劳动时偶现","score":20},{"id":"3","desc":"运动或重劳动时常现（或不能参加）","score":15},{"id":"4","desc":"日常生活偶见","score":10},{"id":"5","desc":"日常生活常见","score":5},{"id":"6","desc":"步步皆现","score":2}]},{"itemId":"","desc":"5.疼痛","option":[{"id":"1","desc":"无","score":25},{"id":"2","desc":"重劳动偶有轻痛","score":20},{"id":"3","desc":"重劳动明显痛","score":15},{"id":"4","desc":"步行超过2km或走后明显痛","score":10},{"id":"5","desc":"步行不足2km或走后明显痛","score":5},{"id":"6","desc":"持续","score":0}]},{"itemId":"","desc":"6.肿胀","option":[{"id":"1","desc":"无","score":10},{"id":"2","desc":"重劳动后","score":6},{"id":"3","desc":"正常劳动后","score":2},{"id":"4","desc":"持续","score":0}]},{"itemId":"","desc":"7.爬楼梯","option":[{"id":"1","desc":"无困难","score":10},{"id":"2","desc":"略感吃力","score":6},{"id":"3","desc":"跟步","score":2},{"id":"4","desc":"不能","score":0}]},{"itemId":"","desc":"8.下蹲","option":[{"id":"1","desc":"无困难","score":5},{"id":"2","desc":"略感困难","score":4},{"id":"3","desc":"不能超过90度","score":2},{"id":"4","desc":"不能下蹲","score":0}]}]}]};

    // 栏目的选项的对应关系
    var groupKeys = {
        "1": ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8']//'3-i',
    };

    var totalItem = 0; // 选择题总数
    var inputItemScoreList = {}; // 存储所有的选项和分数
    var inputItemValueList = {}; // 存储所有的选项和值
    var resultScore = {}; // 计算后的栏目分数

    // 初始化页面
    var buildPage = function () {
        var data = [];
        data.push('<dl id="lysholm-questions">');

        $.each(pageData.data, function (k, v) {
            var groupId = v.groupId;
            var groupName = v.groupName;
            data.push('<dt class=""><label style="font-size: 14px;font-weight: bold;">' + groupId + ' ' + groupName + '</label></dt>');

            var item = v.item;
            totalItem += item.length; // 累加选择题总数

            $.each(item, function (i, j) {
                var itemId = j.itemId;
                var itemDesc = j.desc;
                data.push('<dd style="margin-left: 25px;">' + (itemDesc == '' ? '' : itemId + ' ' + itemDesc) + '</dd><dd><ul>');
                var option = j.option;
                $.each(option, function (m, n) {
                    var optionId = n.id;
                    var optionDesc = n.desc;
                    var optionScore = n.score;
                    data.push('<li style="height:19.5px;padding: 0 0 6.5px 0;">');
                    data.push('<input style="padding: 0;margin: 0;" class="question-radio" type=radio name=' + 1 + '-' + (i + 1) + ' value=' + optionId + ' data-score=' + optionScore + ' />');
                    data.push(optionDesc);
                    data.push('</li>');
                });
                data.push('</ul></dd>');
                data.push('<dd class="dashed-border" style="width: 90%;margin:0;"></dd>');
            });
        });

        data.push('</dl>');
        $('#table-data').append(data.join(''));
    }

    // 计算分数
    var calcScore = function () {
        var optionItem = $("#table-data input[type='radio']");
        var inputItemScores = {};
        var inputItemValues = {};
        $.each(optionItem, function (i) {
            var n = $(this).attr('name');
            var s = $(this).attr('value');
            inputItemScores[n] = 0;
        });

        var totalScore = 0;
        $.each(inputItemScores, function (v) {
            var score = $("#table-data input[name='" + v + "']:checked").attr("data-score");
            var value = $("#table-data input[name='" + v + "']:checked").val();
            if (typeof(score) == 'undefined' || score == null || score == "") {
                score = '0';
            }

            if (typeof(value) == 'undefined' || value == null || value == "") {
                value = '0';
            }

            inputItemScores[v] = score;
            inputItemValues[v] = value;
            totalScore += parseFloat(score);
            debugAlert(score);
        });
        inputItemValueList = inputItemValues;
        inputItemScores = inputItemScores;

        // 计算每行的分数
        var it = {};
        $.each(groupKeys, function (v) {
            var arr = groupKeys[v];
            var sc = 0;
            $.each(arr, function (k) {
                sc += parseFloat(inputItemScores[arr[k]]);
            });
            it[v] = sc;
        });

        $(".result-score").text(it["1"]);
    }

    var listenRadioChange = function () {
        $('#table-data input[type="radio"]').click(function () {
            calcScore();
        });
    }
    
    // 初始化页面
    buildPage();
    
    // 监听按钮选择变更
    listenRadioChange();

    function setEditable(edit) {
        if (edit) {
            editPage.removeClass('hide');
            viewPage.addClass('hide');
        } else {
            viewPage.removeClass('hide');
            editPage.addClass('hide');
            $(".question-radio").attr('disabled', 'disabled');
            $(".question-item").attr('disabled', 'disabled');
            $("#knee-lysholm input").attr('disabled', 'disabled');
        }
    }

    function setGaugeResult(result) {
        $("#text_companion").val(result.companion);
        $.each(result.questions, function (idx, val) {
            $("#lysholm-questions input[type='radio'][name='" + idx + "'][value='" + val + "']").prop("checked", "checked");
        });
        calcScore();
    }

    function getGaugeResult() {
        // 检查是否所有的选项都被选择
        if (!checkItemComplete()) {
            return null;
        }
        var companion = $("#text_companion").val().trim();
        var result = {'questions': inputItemValueList, 'resultScore': resultScore, 'companion': companion};
        debugAlert(result);
        return result;
    }

    var checkItemComplete = function () {
        var checkedItem = $("#table-data input[type='radio']:checked").length;
        var n = totalItem - checkedItem;
        if (n != 0) {
            //差一个没有选择
            if (n == 1) {
                //是第7个没有选择
                if (!$("#table-data input[name='7-a']").prop("checked")) {
                    return true;
                } else {
                    utils.msgError("请完成所有问题");
                    return false;
                }
            } else {
                utils.msgError("请完成所有问题");
                return false;
            }
        }
        return true;
    }
    
    /**
     * 检查用户输入的值是否有效
     * 用户提交整个页面的时候进行检查
     *
     * @return boolean true/false 检查通过/不通过
     */
    var checkSpecifyItem = function(item){
    	var itemName = $(item).attr('name');
    	// text_companion陪同者不需要填写
     	if (itemName == 'text_companion') {
	     	// 元素名称 1 陪同者姓名
	     	var companion = $("#text_companion").val();
	     	if (!isBlank(companion) && companion.length > 10) {
                utils.msgError("陪同者名称长度限制在10以内!");
	     		$("#text_companion").focus();
	     		return false;
	     	}
     	} else if (typeof(item) == "undefined" || item == null || $(item).val() == "null" || $(item).val() == "") {
            utils.msgError("请完成所有问题");
     		return false;
        }
    	return true;
    }
    
    /**
     * 判断字符串是否为blank
     * @param string
     * @return boolean
     */
    var isBlank = function(str){
     	str = str||'';
      	return '' == str.replace(/(^s*)|(s*$)/g, "").trim();
    }

    function getCount(){
        $(".result-score").text(null);
    }

</script>
</html>